<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/webjars/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js"></script>


    <SCRIPT LANGUAGE="JavaScript">
        var es = new EventSource("/servletdemo/servlet/sse");
        es.addEventListener("open", function (e) {
            console.log("open");
            setMessageInnerHTML("建立连接")
        })
        es.addEventListener("javaboy", function (e) {
            console.log(e.data, e.lastEventId, e);
            setMessageInnerHTML(e.data+e.lastEventId);
        })
        es.addEventListener("error", function (e) {
            console.log("error")
            setMessageInnerHTML("连接出错或连接已断开"+e.type)
            es.close();
        })
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            //在信息窗口拼接然后换行
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }
    </SCRIPT>
</HEAD>
<BODY>
<div id="message">信息窗口<br/></div>

</BODY>
</HTML>
